<template>
  <div class="virtually-title-right-menu" @mouseleave="mouseleave">
    <div
      :key="menu.key"
      v-for="(menu, menuIndex) in menus"
      v-show="!menu.filter || menu.filter(column)"
      @mouseover="mouseover($event, menu, menuIndex)"
      :ref="`menu-${menuIndex}`"
      @click="rightMenuClick(column, menu)"
      :class="[
        parentMenu == menu
          ? 'title-right-menu-hover-active'
          : menu.value || (menu.valueHandel && menu.valueHandel(column))
          ? 'title-right-menu-active'
          : ''
      ]"
      class="title-right-menu-item">
      <div :class="isDrag ? 'drag-area' : 'no-drag'">
        <icon-font class="drag-icon" v-if="menu.draggable" type="cap-icon-drag" />
        <a-checkbox
          style="margin-right: 4px"
          v-if="menu.type == 'checkBox'"
          v-model="menu.value"></a-checkbox>
        <div class="name-context" :title="menu.name">
          {{ menu.name }}
        </div>
      </div>
      <div v-if="menu.children || menu.key === 'fieldset'">
        <icon-font type="cap-icon-youjiantou" />
      </div>
      <a-switch
        v-if="menu.type == 'switch'"
        size="small"
        :disabled="menu.value && menus.filter((m) => m.value).length === 1"
        v-model="menu.value" />
    </div>
    <UiTitleRightDropdown
      v-if="showSubMenus"
      :style="subMenuStyle"
      :column="column"
      :menus="subMenus"
      :deep="deep + 1"
      @mouseleave="subMouseleave"
      ref="subMenus"></UiTitleRightDropdown>
    <UiFieldset
      v-if="opendFieldset"
      @mouseleave="subMouseleave"
      :isDrag="true"
      :deep="deep + 1"
      :style="subMenuStyle"
      :menus="subMenus"
      :column="column">
    </UiFieldset>
  </div>
</template>
<script>
  import UiFieldset from './ui-fieldset.vue';
  export default {
    name: 'UiTitleRightDropdown',
    components: { UiFieldset },
    props: {
      columns: {},
      column: {},
      menus: {},
      confirm: {},
      deep: {
        type: Number,
        default: 0
      },
      fieldsOptionMenus: {
        type: Array
      },
      isDrag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showSubMenus: false,
        subMenus: [],
        subMenuStyle: {},
        columnsIsChange: false,
        opendFieldset: false,
        parentMenu: null
      };
    },
    mounted() {},
    methods: {
      mouseover(event, menu, menuIndex) {
        if (menu.children || menu.key === 'fieldset') {
          let dom = event.target || event.srcElement;
          if (this.$refs['menu-' + menuIndex]) {
            dom = this.$refs['menu-' + menuIndex][0];
          }
          let brc = dom.getBoundingClientRect();
          // 大于表格宽度，则显示到右侧
          let isLeft = false;
          let cldStyle = menu.childrenMenuStyle || {};
          let cldWidthPx = cldStyle.width || '96px';
          let cldWidth = Number(cldWidthPx.replace('px', ''));
          let menus = menu.key === 'fieldset' ? this.fieldsOptionMenus : menu.children;
          if (brc.right + cldWidth + 20 > window.innerWidth) {
            isLeft = true;
          }
          let top = dom.offsetTop;
          // 获取子菜单高度
          let height = menus.length * 28 + 10;
          // 最大300
          if (height > 300) {
            height = 300;
          }
          let isTop = false;
          // 顶部
          if (brc.bottom + height > window.innerHeight) {
            top = top - height + 28 + 5;
            isTop = true;
          }
          // 顶部
          if (isTop) {
            // let brcTop = brc.top - 38;
            // 不能超出顶部
            if (brc.top - height < 0) {
              top = top + (height - brc.top) - 28;
            }
          }
          this.subMenuStyle = {
            position: 'absolute',
            top: top + 'px',
            left: isLeft ? '-' + cldWidthPx : '96px'
          };
          if (menu.childrenMenuStyle) {
            this.subMenuStyle = {
              ...this.subMenuStyle,
              ...cldStyle
            };
          }
          this.parentMenu = menu;
          if (menu.key === 'fieldset') {
            this.opendFieldset = true;
          } else {
            this.showSubMenus = true;
          }
          this.subMenus = menus;
          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
          }
        } else {
          this.parentMenu = null;
          this.showSubMenus = false;
        }
      },
      subMouseleave() {
        this.timer = setTimeout(() => {
          this.showSubMenus = false;
          this.parentMenu = null;
          this.updataColumns();
        }, 300);
      },
      updataColumns(fieldsOptionMenus) {
        this.columnsIsChange = false;
        this.$emit('updataColumns', fieldsOptionMenus);
      },
      mouseleave() {
        this.$emit('mouseleave');
        if (this.deep === 0) {
          this.opendFieldset = false;
          this.updataColumns(this.fieldsOptionMenus);
        }
        this.showSubMenus = false;
        this.parentMenu = null;
        if (this.confirm) {
          this.confirm();
        }
      },
      rightMenuClick(column, menu) {
        if (menu.value !== undefined) {
          menu.value = !menu.value;
        }
        if (typeof column.dropdownMenus[menu.key] === 'object') {
          column.dropdownMenus[menu.key].clickHandel &&
            column.dropdownMenus[menu.key].clickHandel(column, menu);
        } else if (menu.click) {
          menu.click(column, menu);
        }
        this.confirm && this.confirm();
      }
    }
  };
</script>
<style lang="scss">
  .virtually-title-right-menu {
    width: 96px;
    background: #ffffff;
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px 0 #00000014, 0 9px 28px 8px #0000000d;
    padding: 5px 0;
    font-size: 12px;
    color: #333333;
    overflow-y: auto;
    max-height: 300px;
    .title-right-menu-active {
      background-color: #e6f6ff !important;background-color: var(--theme-brand1,#e6f6ff) !important;
    }
    .title-right-menu-hover-active {
      background: #f5f5f5 !important;
    }
    .title-right-menu-item {
      width: 100%;
      line-height: 28px;
      text-align: left;
      box-sizing: border-box;
      align-items: center;
      display: flex;
      padding: 0 12px;
      &:hover {
        background: #f5f5f5 !important;
      }
      .no-drag {
        cursor: pointer;
        display: flex;
        align-items: center;
        overflow: hidden;
        flex: 1;
      }
      .drag-area {
        cursor: move;
        display: flex;
        align-items: center;
        overflow: hidden;
        flex: 1;
      }
      .drag-icon {
        color: #666;
        margin-right: 4px;
      }
      .name-context {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
        padding-right: 6px;
      }
    }
  }
</style>
